#starter-dashlet {
  margin: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .media-left {
    margin-top: auto;
    margin-bottom: auto;
  }

  .row>div {
    padding-top: $slim-gutter;
    padding-bottom: $slim-gutter;
  }

  .container-fluid {
    overflow-y: auto;
    height: 100%;
    padding: 0;
  }

  .buttons {
    background-color: $brand-bg;
    min-width: 2em;
    height: auto;
    display: flex;
    border-left: $tools-border-width solid $brand-menu;
    align-items: center;
    justify-content: center;
    svg {
      height: 2em;
      width: 2em;
      max-width: 2em;
      max-height: 2em;
    }
  }

  .starter-dashlet-tools-header {
    justify-content: space-between;
    align-items: baseline;
    height: auto;
    .dashlet-title {
      filter: unset;
    }
  }

  .media-body {
    overflow-y: visible;
    overflow-x: hidden;
    vertical-align: middle;
    flex-direction: row;
    position: relative;
  }
  
  .media-right {
    display: flex;
    align-items: center;

    .refresh-button {
      @extend .btn-embed;
      position: absolute;
      top: $half-gutter;
      right: $half-gutter;
    }
  }

  .box-drag-handle-container {
    display: flex;
    flex-direction: row;
    margin-right: .5rem;
    background-color: transparent;
    .box-drag-handle {
      background-color: $brand-bg;
      min-width: 1.66em;
      height: auto;
      display: flex;
      cursor: move;
      border-right: $tools-border-width solid $brand-menu;
      .box-drag-handle-icon {
        padding: 0.25em;
        color: $brand-menu;
        width: 2em;
        height: 2em;
        margin: auto;
        cursor: move;
      }
    }
  }
}

.tool-icon {
  width: 100%;
  height: 100%;
  border-radius: 0.1em;

  &.invalid {
    filter: grayscale(100%);
    color: $gray-darker;
  }

  &.valid {
    color: $brand-info;
  }
}

.tool-button {
  background-color: $brand-bg;
  display: flex;
  flex-direction: row;
  padding: 0.66em;
  min-width: 10.66em;
  width: 100%;

  button {
    @extend .btn-embed;
  }
  span {
    flex: 1 1 0;
    margin: auto 0.5em;
    white-space: nowrap;
    overflow-wrap: break-word;
    overflow-x: hidden;
  }
  .btn-group {
    display: inline-flex;
    margin: auto 0;
  }
}

.starter-tool-icon-container:hover {
  background-color: rgba(0,0,0,0.5);
  svg, img, .tool-icon {
    filter: opacity(0.5);
    background-color: rgba(0,0,0,0.5);
  }
  .primary-star {
    visibility: hidden !important;
  }
  .icon-launch-simple {
    color: $text-color;
    background-color: transparent;
    filter: opacity(1);
  }
  .run-tool {
    visibility: visible !important;
  }

  border: $tools-border-width solid $brand-clickable !important;
}

.starter-tool-icon-container {
  border: $tools-border-width solid $border-color;
  border-radius: 0.2em;
  position: relative;

  width: $tools-icon-size + $tools-border-width * 2;
  height: $tools-icon-size + $tools-border-width * 2;
  
  background-color: $brand-bg;

  &.primary {
    background-color: rgba(255, 255, 255, 0.1);
    svg, img {
      background-color: rgba(255, 255, 255, 0.1);
    }
    border: $tools-border-width solid #ffffff;
  }
  .run-tool {
    background-color: transparent;
    border: unset;
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0px;
    right: 0px;
    visibility: hidden;
  }
  .primary-star {
    font-size: 185%;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    visibility: visible;
    color: #ffffff;
  }
  img {
    display: block
  }
}

#add-tool-button-menu {
  // top padding needs to be large enough to fit the icon
  // and then some padding around it
  // padding: 2em $half-gutter $half-gutter;
  // height: 100%;

  display: flex;
  background-color: transparent;
  border: $tools-border-width solid $border-color;
  width: 98.5%;

  span {
    margin-top: auto;
    margin-bottom: auto;
  }

  .btn-add-tool-text {
    @extend .tool-icon-text;
    align-items: flex-start;
    justify-content: end;
    margin-left: 1em;
  }

  .btn-add-tool-dropdown-toggle {
    @extend .tool-icon-container;
    min-height: auto;
  }
  .btn-add-tool-icon {
    @extend .tool-icon;
    height: 3.83em;
    position: inherit;
  }
}

.tool-icon-box {
  --grid-layout-gap: 1em;
  --grid-column-count: 3;
  --grid-item--min-width: 30em;
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}

.env-kvpair {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#tool-edit-dialog {
  .modal-dialog {
    width: 60vw;
  }
  .input-group {
    width: 100%;
  }
  .col-sm-3 > .control-label {
    width: 100%;
  }
  .toggle-container {
    padding-left: $gutter-width;
  }
}
